<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-30 19:28:58
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-30 19:38:21
 * @FilePath: \实训二PC\vue-project\src\components\PieContent.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div ref="PieLeft" class="chart"></div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import * as echarts from 'echarts';

const PieLeft = ref<HTMLElement | null>(null);

const BarLineChart = () => {
    if (PieLeft.value) {
        var myChart = echarts.init(PieLeft.value);
        // 图表配置项
        const option = {
            title: {
                text: '今日支付方式对比',
                x: 'center',
                y: 'top',
                top: '-1%',
                textStyle: {
                    fontSize: 17, // 标题字体大小
                    color: "#1BA9BA"
                }
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'horizontal',
                top: "9%",
                left: 'center',
                icon: 'circle', // 将系列标题前面的图标形状设置为圆形
                itemWidth: 10,
                data: [
                    {
                        name: '支付宝',
                        textStyle: {
                            fontSize: 12
                        }
                    }, {
                        name: '微信',
                        textStyle: {
                            fontSize: 12
                        }
                    }, {
                        name: '其他',
                        textStyle: {
                            fontSize: 12
                        }
                    }]
            },
            color: ['#679CF6', '#169F5E', '#B2B7C6'],
            series: [
                {
                    name: '订单状态',
                    type: 'pie',
                    radius: ['45%', '70%'],
                    top: '10%',
                    bottom: '12%',
                    data: [
                        { value: 36, name: '支付宝' },
                        { value: 28, name: '微信' },
                        { value: 2, name: '其他' }
                    ],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    }
}
onMounted(() => {
    BarLineChart()
});
</script>

<style scoped lang="scss">
.chart {
    width: 100%;
    height: 120%;
}
</style>